<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>

<script>
export default {
  name: 'bmap',
  data() {
    return {
      BMap: {},
      map: {},
      center: {},
      zoom: 10,
      marks: [
        {
          id: 1,
          name: '南宁第二中学(凤岭)',
          lon: 108.427911,
          lat: 22.829105,
          icon: 'img/school.png',
          context: '这个中学好厉害啊',
          viewImg: 'img/1.jpg'
        },
        {
          id: 2,
          name: '百花苑小区',
          lon: 108.427279,
          lat: 22.824994,
          icon: 'img/neighbourhoods.png',
          context: '这个小区好像住起来很舒服',
          viewImg: 'img/2.jpg'
        },
        {
          id: 3,
          name: '凤岭名园',
          lon: 108.425842,
          lat: 22.832846,
          icon: 'img/neighbourhoods.png',
          context: '这个小区看上去好高大上',
          viewImg: 'img/3.jpg'
        },
        {
          id: 4,
          name: '东方皇城花园',
          lon: 108.418485,
          lat: 22.831506,
          icon: 'img/neighbourhoods.png',
          context: '这个小区名字看起来很厉害',
          viewImg: 'img/4.jpg'
        },
        {
          id: 5,
          name: '凤岭山语城',
          lon: 108.421826,
          lat: 22.826318,
          icon: 'img/neighbourhoods.png',
          context: '这里描述我也不知道该说啥',
          viewImg: 'img/5.jpg'
        },
        {
          id: 6,
          name: '红星小区',
          lon: 108.434182,
          lat: 22.82713,
          icon: 'img/neighbourhoods.png',
          context: '看起来这个小区好小啊',
          viewImg: 'img/6.jpg'
        }
      ],
      polys: [
        {
          color: '#9B30FF',
          coordinate:
            '108.425882,22.825535;108.425918,22.827591;108.425711,22.828466;108.424867,22.830598;108.425361,22.830689;108.425397,22.830681;108.425711,22.830806;' +
            '108.427984,22.83158;108.428747,22.831514;108.428909,22.83133;108.428954,22.830731;108.430418,22.830056;108.430787,22.829723;108.430787,22.829723;' +
            '108.4312,22.828982;108.43129,22.828532;108.43111,22.827283;108.427517,22.826034;108.42625,22.82561'
        },
        {
          color: '#9B30FF',
          coordinate:
            '108.433711,22.827587;108.433953,22.827662;108.434452,22.827775;108.434663,22.827271;108.434802,22.826896;108.434429,22.826642;108.434128,22.826463;' +
            '108.433994,22.826513;108.433868,22.826946'
        },
        {
          color: '#9B30FF',
          coordinate:
            '108.425473,22.825197;108.426044,22.825276;108.428703,22.82618;108.428595,22.825177;108.428972,22.824931;108.429075,22.824827;108.429012,22.824635;' +
            '108.428554,22.824377;108.427629,22.824344;108.427077,22.824365;108.427077,22.824365;108.425832,22.824539;108.425563,22.824773;108.425473,22.825193'
        },
        {
          color: '#9B30FF',
          coordinate:
            '108.41874,22.828333;108.419746,22.828299;108.420276,22.828183;108.421902,22.827458;108.422226,22.827408;108.423385,22.827442;108.423385,22.827442;' +
            '108.423394,22.826946;108.423645,22.826821;108.425087,22.826838;108.425172,22.825893;108.425329,22.825859;108.425338,22.82546;108.423542,22.825306;' +
            '108.42104,22.825218;108.420492,22.825984;108.420308,22.826201;108.41932,22.827229;'
        },
        {
          color: '#FF0000',
          coordinate:
            '108.39008,22.831181;108.391948,22.831297;108.392002,22.830598;108.392496,22.829423;108.392326,22.829115;108.392218,22.829065;108.391769,22.829165;' +
            '108.391463,22.829465;108.391194,22.830202;108.39092,22.83056;108.390924,22.830556;108.390803,22.830602;108.39012,22.830643;108.390084,22.830685;'
        },
        {
          color: '#FF0000',
          coordinate:
            '108.389819,22.832146;108.389819,22.832146;108.391037,22.832434;108.391216,22.832579;108.3914,22.832796;108.391549,22.832888;108.392303,22.832829;' +
            '108.392303,22.832829;108.392582,22.832201;108.392564,22.831393;108.392514,22.831347;108.390062,22.831231;108.389972,22.831705'
        },
        {
          color: '#FF0000',
          coordinate:
            '108.393058,22.833854;108.393148,22.833912;108.394971,22.834249;108.395317,22.833566;108.395241,22.832538;108.395492,22.831614;108.395074,22.831509;' +
            '108.394796,22.831043;108.394845,22.830352;108.393866,22.830285;108.39317,22.830335;108.392932,22.830502;108.392788,22.830727;108.392721,22.831455;' +
            '108.392716,22.832055;'
        },
        {
          color: '#FF0000',
          coordinate:
            '108.390066,22.827417;108.39295,22.827396;108.392968,22.827362;108.392981,22.825676;108.392555,22.825601;108.392285,22.825464;108.392676,22.824981;' +
            '108.391549,22.824056;108.390834,22.82424;108.390066,22.824356' +
            ''
        }
      ]
    }
  },
  mounted() {},
  methods: {
    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      this.initMap()
    },
    initMap() {
      //初始化南宁市 放大级别13
      this.center = { lng: 108.3733749001, lat: 22.822986998 }
      this.zoom = 13
      //添加地图类型控件
      this.map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        })
      )
      //添加左上角缩放平移控件
      this.map.addControl(new BMap.NavigationControl())
      //添加左下角比例尺
      this.map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }))
      //开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true)
      this.addpoly(this.polys);
      this.addMar(this.marks)
    },
    addMar(data) {
      for (var i = 0; i < data.length; i++) {
        var marker = new BMap.Marker(new BMap.Point(data[i].lon, data[i].lat), {
          icon: new BMap.Icon(require('../../assets/map/'+data[i].icon), new BMap.Size(50, 50))
        }) // 创建标注
        marker.setTitle(data[i].name)
        marker.dataCont = data[i]

        this.map.addOverlay(marker)

        marker.addEventListener('click', function(e) {
          var viewWin =
            "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" +
            e.target.dataCont.name +
            '</h4>' +
            "<img style='float:right;margin:4px' id='imgDemo' src='" +
            require('../../assets/map/'+e.target.dataCont.viewImg) +
            "' width='139' height='104' title='" +
            e.target.dataCont.name +
            "'/>" +
            "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" +
            e.target.dataCont.context +
            '</p>' +
            '</div>'
          var infoWindow = new BMap.InfoWindow(viewWin)
          this.openInfoWindow(infoWindow)
          //图片加载完毕重绘infowindow
          document.getElementById('imgDemo').onload = function() {
            infoWindow.redraw() //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
          }
        })
      }
    },
    addpoly(data) {
      for (var i = 0; i < data.length; i++) {
        var ply = new BMap.Polygon(data[i].coordinate, { strokeWeight: 2, strokeColor: data[i].color }) //建立多边形覆盖物
        this.map.addOverlay(ply)
      }
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>